<template>
    <!-- 采购信息 -->
    <div class="w">
        <Screening />
        <div class="publishing">
            <div></div>
            <div class="publishing_button">免费发布采购信息</div>
        </div>
        <div class="listingsBox">
            <div class="carousel_zong">
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
                <div class="carousel_tem">
                    <div class="carousel_tem_1">采购燃气灶维修</div>
                    <div class="carousel_tem_2">采购总量：1(台)</div>
                    <div class="carousel_tem_3">
                        <div>价格：<span class="bargain">面议</span></div>
                        <div class="particulars">查看详情</div>
                    </div>
                    <div class="carousel_tem_4">
                        <div>2023-12-12</div>
                        <div>报价结束剩余<span class="bargain">29</span>天</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabWindow">
            <Tabwindow/>
        </div>
    </div>
</template>
<script setup>
import Screening from '@/components/screening/index.vue'
import Tabwindow from '@/components/tab_window/index.vue'
</script>
<style lang="scss" scoped>
.w {
    width: 75vw;
    margin: 0 auto;
}

.publishing {
    display: flex;
    justify-content: space-between;
    width: 75vw;
    margin-top: 20px;

    .publishing_button {
        width: 8.75vw;
        height: 2.25vw;
        background-color: #D72A07;
        line-height: 2.25vw;
        font-size: 14px;
        text-align: center;
        border-radius: 5px;
        color: #fff;
    }
}

.listingsBox {
    width: 75vw;
    display: flex;
    flex-wrap: wrap;

    .carousel_zong {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        width: 75vw;

        .carousel_tem {
            width: 12.46vw;
            height: 8vw;
            background-color: #FFFFFF;
            padding: 15px 15px 0;
            border-radius: 5px;
            box-shadow: 0 2px 2px 0 #ccc;
            margin-right: 10px;

            &:nth-child(-n + 5) {
                margin-right: 9px;
                margin-bottom: 10px;

            }

            &:nth-child(5n) {
                margin-right: 0px;

            }

            &:nth-child(n+5) {
                margin-right: 9px;
            }

            &:last-child {
                margin-right: 0px;
            }

            .carousel_tem_1 {
                margin-bottom: 10px;
                font-style: 14px;
                font-weight: 700;
                color: #333;
            }

            .carousel_tem_2 {
                margin-bottom: 10px;
                font-size: 12px;
            }

            .carousel_tem_3 {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                margin-bottom: 10px;

                .particulars {
                    width: 3.75vw;
                    height: 1.5vw;
                    background-color: #2270D7;
                    border-radius: 5px;
                    text-align: center;
                    line-height: 1.5vw;
                    color: #FFFFFF;
                }
            }

            .carousel_tem_4 {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
            }
        }
    }
}

.tabWindow {
    margin-top: 20px;
}
</style>